<template>
  <div class="cell_group">
    <div class="cell">
      <div class="title">
        {{config.attrName}}
      </div>
      <input :class="{'isWrong':!noWrong}" type="text" :placeholder="'请输入'+config.attrName" v-model="config.value" @blur="changeName('blur')" @focus="changeName('focus')" :maxlength="this.config.inputMax">
    </div>
  </div>
</template>
<script>
export default {
  name: "input",
  props: {
    config: {
      type: Object,
      required: true
    },
    parentIndex: Number,
    itemIndex: Number
  },
  data() {
    return {
      noWrong: true
    };
  },
  created() {
    this.config.value = this.config.value ? this.config.value : "";
    if (this.config.value) {
      // 获取到的数据 不需要验证
      this.$emit("changeValue", this.parentIndex, this.itemIndex, this.config);
    }
  },
  methods: {
    changeName(e) {
      if (e === "focus") {
        this.noWrong = true;
      } else {
        if (this.config.patternCondition) {
          this.noWrong = new RegExp(this.config.patternCondition).test( this.config.value );
        } else {
          this.noWrong = true;
        }
        this.config.noWrong = this.noWrong;
        //符合正则表达式
        this.$emit(
          "changeValue",
          this.parentIndex,
          this.itemIndex,
          this.config
        );
      }
    }
  }
};
</script>
<style lang="less">
</style>

